
<template>
  <div :class="['LifeInterpretPanel']" :id="clsid"   >
    <div class="view">
      <div class="titleBtn">
        <div class="backbtn" @click="backBtnClick()"></div>
        <div class="title">纯钧八字排盘系统</div>
        <div class="paibtn" @click="paipBtnClick()">排盘信息</div>
      </div>
      <div class="content" :style="{height:viewHeight+'rem'}">
        <div class="my">
          <div class="name">姓名:{{lifeData.user_base_info.user_name}}</div>
          <div class="txtdic">性别:<span style="color: #6A6A6A;">{{(lifeData.user_base_info.sex==Enum.gender_1?'男':'女')}}</span></div>
          <div class="txtdic">阳历:<span style="color: #6A6A6A;">{{lifeData.user_base_info.gl_birthday}}</span></div>
          <div class="txtdic">农历:<span style="color: #6A6A6A;">{{lifeData.user_base_info.nl_birthday}}</span></div>
          <div class="txtdic">地区:<span style="color: #6A6A6A;">{{lifeData.user_base_info.birthplace}}</span></div>
          <div class="shengxiao">
            <div class="item br1">
              <p class="p1">{{lifeData.user_base_info.sheng_xiao}}</p>
              <p class="p2">生肖</p>
            </div>
            <div class="item br1">
              <p class="p1">{{lifeData.user_base_info.xing_zuo}}</p>
              <p class="p2">星座</p>
            </div>
            <div class="item br1">
              <p class="p1">{{lifeData.user_base_info.ben_ming_pu_sa}}</p>
              <p class="p2">本命佛</p>
            </div>
            <div class="item br1">
              <p class="p1">{{lifeData.user_base_info.xing_xiu}}</p>
              <p class="p2">星宿</p>
            </div>
            <div class="item">
              <p class="p1">{{lifeData.user_base_info.ben_gong}}</p>
              <p class="p2">命宫</p>
            </div>
          </div>

          <div class="my5shu">
            <div class="item5shu" style="padding-right: 0.1rem;">
              <div class="title">{{lifeData.yong_shen.name}}</div>
              <div class="ico">
                <img v-for="(item,index) in lifeData.yong_shen.list"
                     :key="index" class="img" :src="require('../../assets/img/life/5x_'+item.wx_id+'.png')">
              </div>
            </div>
            <div class="item5shu" style="padding-right: 0.1rem;">
              <div class="title">{{lifeData.ji_shen.name}}</div>
              <div class="ico">
                <img v-for="(item,index) in lifeData.ji_shen.list"
                     :key="index" class="img" :src="require('../../assets/img/life/5x_'+item.wx_id+'.png')">
              </div>
            </div>
          </div>

        </div>
        <div class="list bottomborder">
          <ul class="ul">
            <!--
            <li>
              <BaZiJianPiTxtView></BaZiJianPiTxtView>
            </li>
            <li>
              <PayTxtView></PayTxtView>
            </li>
            -->
            <li v-for="(item,index) in lifeData.txtList" :key="index">
              <BaZiJianPiTxtView  :msg="item"></BaZiJianPiTxtView>
            </li>
          </ul>
        </div>
        <!--<div class="writeMes">
          <MessageView></MessageView>
        </div>-->

        <!--<div class="myRecdDiv">
          <MyMsRecdView></MyMsRecdView>
        </div>-->
      </div>
    </div>
  </div>
</template>

<style scoped>
.LifeInterpretPanel{
  background-color:#E8E8E8;width: 100%;height: 100%;font-size: 0.24rem;color: #F1C6B8;

}
.rightborder{
  border-right-style:solid;border-width:0.01rem;border-color:rgba(115, 65, 47, 0.5);
}
.bottomborder{
  border-bottom-style:solid;border-width:0.01rem;border-color:rgba(81, 56, 49, 0.5);

}
.view{
  width: 7.5rem;    height: auto;background-color:#E8E8E8;
}
.titleBtn{
  position:relative;width: 100%;height: 0.4rem;padding-top: 0.5rem;
}
.titleBtn .backbtn{
  position:absolute; background-image: url("../../assets/img/ui/backBtn.png");width: 0.14rem;height: 0.22rem;
  left: 0.15rem;margin-top:0.09rem;
}
.titleBtn .title{
  position:absolute;font-weight: 500;font-size: 0.32rem;color: #000000;line-height: 0.4rem;left: 2.5rem;
}
.titleBtn .paibtn{
  position:absolute;background-color: #FFFFFF;width: 1.24rem;height: 0.34rem;border-radius: 0.25rem;margin-top:0.03rem;right: 0.15rem;
  color: #808080;line-height: 0.34rem;display: none;
}
.view .content{
  position: relative; left: 0rem;top:0rem;overflow-y:auto;overflow-x:hidden;
}
.content .my{
  position:relative;width: 100%;margin-bottom: 0.2rem;
}
.content .my .shengxiao{
  position: relative;width: 7.18rem;height: 0.8rem;background-color: #FFFFFF;left: 0.16rem;border-radius: 0.25rem;
  margin-top: 0.2rem;margin-bottom: 0.2rem;
  display:flex;display: -webkit-flex;flex-direction:row;justify-content:center;
}
.content .my .shengxiao .br1{
  border-right: 0.01rem solid #E2E1E0;height: 0.5rem;
}
.content .my .shengxiao .p1{
  font-weight: 500;font-size: 0.24rem;color: #000000;
}
.content .my .shengxiao .p2{
  font-weight: 400;font-size: 0.2rem;color: #B6B6B6;line-height: 0.24rem;padding-top: 0.1rem;
}
.content .my .shengxiao .item{
  position: relative;display: inline-block;padding-left: 0.3rem;padding-right: 0.3rem;padding-top: 0.15rem;
}
.content .my .name{
  position:relative;text-align: center;font-weight: 600;font-size: 0.28rem;color: #000000;line-height: 0.8rem;
}
.content .my .txtdic{
  position:relative;text-align: center;font-weight: 400;font-size: 0.24rem;color: #000000;line-height: 0.4rem;
}

.content .my .myTxt{
  position: absolute;top:3.2rem;width: 6.5rem;text-align: left;left:0.5rem;line-height: 0.4rem;
  border-bottom-style:solid;border-width:0.01rem;border-color:rgba(81, 56, 49, 0.5);
  padding-left: 0.5rem;padding-bottom: 0.2rem;
}
.content .my .myMing{
  position: absolute;background-image: url("../../assets/img/life/myBg2.png");width: 6.88rem;height: 0.82rem;left: 0.31rem;top:5rem;
}
.content .my .myMing .div1{
  position:relative;height: 0.52rem;top:0.15rem;line-height: 0.52rem;width: 33.3%;
  border-right-style:solid;border-width:0.01rem;border-color:rgba(115, 65, 47, 0.5);
}
.content .my .my5shu{
  position: relative;width: 7.18rem;left: 0.16rem;justify-content:space-between;
  display:flex;display: -webkit-flex;flex-direction:row;
}
.content .my .my5shu .item5shu{
  position:relative;background-color: #FFFFFF;width: 3.4rem;height: 0.88rem;border-radius: 0.15rem;
  display:flex;display: -webkit-flex;flex-direction:row;
}
.content .my .my5shu .item5shu .title{
  font-weight: 400;font-size: 0.22rem;color: #6A6A6A;line-height: 0.88rem;width: 0.8rem;
}
.content .my .my5shu .item5shu .ico{
  display:flex;display: -webkit-flex;flex-direction:row;align-items: center;
}
.content .my .my5shu .item5shu .ico .img{
  position: relative;width: 0.6rem;height: 0.6rem;padding-left: 0.05rem;
}
.content .list{
  position:relative;padding-top: 0.5rem;padding-bottom: 0.5rem;background-color: #FFFFFF;border-radius: 0.25rem;
  display:flex;display: -webkit-flex;flex-direction:column;align-items: center;
}
.content .list .ul{
  position:relative;
}
.content .list .ul li{
  padding-top: 0.1rem;padding-bottom: 0.1rem;
}
.content .writeMes{
  position: relative;padding-top: 0.5rem;padding-bottom: 0.5rem;
  border-bottom-style:solid;border-width:0.01rem;border-color:rgba(81, 56, 49, 0.5);
}
.content .myRecdDiv{
  position:relative;padding-top: 0.5rem;padding-bottom: 0.5rem;
  display:flex;display: -webkit-flex;flex-direction:column;align-items: center;
}
</style>
<script setup>
import Enum from "@/gamejs/Enum";
import Util from "@/gamejs/Util";
import {reactive,ref, onMounted, onBeforeUnmount, onUnmounted,watch,computed} from "vue";
import { useStore} from 'vuex';
import {useRoute, useRouter} from 'vue-router';

import MessageView from "@/views/components/MessageView";
import MyMsRecdView from "@/views/components/MyMsRecdView";
import BaZiJianPiTxtView from "@/views/components/BaZiJianPiTxtView";
import PayTxtView from "@/views/components/PayTxtView";
let store = useStore();
let clsid=winApp.getClsId();
let router = useRouter();
let routerData = useRoute();
let viewHeight=ref(17);
/*组件挂载完成后执行的函数；*/
onMounted(() => {

  console.log("LifeInterpretPanel onMounted  命书解读",routerData.query.view);
  let _h=Math.floor(document.body.clientHeight/(window._windSize/100))/100;
  //viewHeight.value=_h-store.state.bottomPanelHeight-0.1;
  viewHeight.value=_h-0.9;
  store.state.lifeRecId=routerData.query.recdid;
  if(routerData.query.recdid==''){
    getDatainit(routerData.query.recdid);
  }else{
    getDataRecdinit();
  }

  winApp.bindHandler(MEventCMD.CMD_PAY_RS, clsid, payRsHandler);
});
onUnmounted(() => {
  //卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
  winApp.deleteNotification(clsid);
  store.state.lifeRecId=Enum.no_num;
  console.log("LifeInterpretPanel onUnmounted  卸载组件实例后  ");
});




function setSRSData(data){
 // data.unlock_status=0;
  if(data.unlock_status===1){//1:已经付费
    store.state.ispay=true;
    store.state.view.paySelectView=Enum.view_status_0;
  }else{
    store.state.ispay=false;
    store.state.view.paySelectView=Enum.view_status_1;
  }
  store.state.lifeRecId=data.rec_id;
  for(let key in lifeData.user_base_info){
    if(data.user_base_info[key]!=null)lifeData.user_base_info[key]=data.user_base_info[key]
  }

  lifeData.txtList=[];
  for(let key in data.ming_shu_info){
    if(key=='ji_shen'){
      lifeData.ji_shen=data.ming_shu_info[key];
    }
    if(key=='yong_shen'){
      lifeData.yong_shen=data.ming_shu_info[key];
    }
    if(data.ming_shu_info[key].data==null)continue;
    let vo={};
    vo.title=data.ming_shu_info[key].name;
    vo.type=0;
    vo.txt=data.ming_shu_info[key].data;
    lifeData.txtList.push(vo);
  }
  if(data.ming_shu_info.yong_shen){

  }
}

function getDataRecdinit(){
  //
  console.log("LifeInterpretPanel getDataRecdinit  命书记录数据   ");
  let data={
      id:routerData.query.recdid
  }
  $.ajax({
    url: store.state.data_url+'/g_mingshu_rec',
    type: 'GET',
    dataType: 'json',
    jsonp: "",
    cache: false,
    data: data,
    success: function(data) {
      console.log("LifeInterpretPanel getDataRecdinit:",data.status,data);
      if(data.status==0){
        setSRSData(data.content);

      }else{
        winApp.sendNotification(MEventCMD.VIEW_LabelNoticeView,'失败');
      }

    },
    error: function(xhr, textStatus, errorThrown) {
      console.log("网络错误!");
      winApp.sendNotification(MEventCMD.VIEW_LabelNoticeView,'网络错误');
    }

  });
}



function getDatainit(recdid){
  console.log("LifeInterpretPanel getDatainit  命书数据   ");
  let data={
    id:recdid,
    account:store.state.userId,
  }
  $.ajax({
    url: store.state.data_url+'/g_mingshu_rec',
    type: 'GET',
    dataType: 'json',
    jsonp: "",
    cache: false,
    data: data,
    success: function(data) {
      console.log("LifeInterpretPanel getDatainit:",data.status,data);
      if(data.status==0){
        setSRSData(data.content);

      }else{
        winApp.sendNotification(MEventCMD.VIEW_LabelNoticeView,'失败');
      }

    },
    error: function(xhr, textStatus, errorThrown) {
      console.log("网络错误!");
      winApp.sendNotification(MEventCMD.VIEW_LabelNoticeView,'网络错误');
    }

  });
}
function backBtnClick(){
  console.log("LifeInterpretPanel backBtnClick");
  if(routerData.query.recdid==''){
    router.go(-1);
  }else{
    router.push({ path:Enum.paiPanXinxiPanelpath, query: {recdid:routerData.query.recdid}});
  }

}
function paipBtnClick(){
  console.log("LifeInterpretPanel paipBtnClick");
  router.push({ path: Enum.paiBanpath, query: { view: Enum.lifeInterpretPanel }});
}



let lifeData=reactive({
  ming_shu_info:{//{name,data}
    ba_zi_ti_yao:{},
  },
  txtList:[],
  ji_shen:[],
  yong_shen:{name:'',list:[]},
  user_base_info:{
    "user_name": "",
    "sex": "-1",
    "birthplace": "",
    "gl_birthday": "",
    "nl_birthday": "",
    "ben_ming_pu_sa": "",
    "xing_xiu": "",
    "xing_zuo": "",
    "sheng_xiao": "",
    "ben_gong": ""
  }
});

function payRsHandler(data){
  console.log("LifeInterpretPanel payRsHandler",data);
  if(data.status==0){
    getDatainit(data.rec_id);
  }
}
</script>
